<template>
  <div>
    <common-header></common-header>

    <div style="width:1200px; margin: 50px auto;">
      <div class="row">
        <div class="col-md-3">
          <!-- 账号安全侧栏 -->
          <safe-nav :activeId="activeId"></safe-nav>
        </div>
        <div class="col-md-9">
          <el-card class="accountCard" shadow="hover">
            <div class="titleWrap">
              <div>收获信息</div>
              <div :class="[isForm ? 'isNone': '']">
                <el-button
                  type="primary"
                  size="small"
                  plain
                  icon="el-icon-edit"
                  @click="isEdit()"
                >添加</el-button>
              </div>
            </div>
            <div class="formShow">
              <el-form
                :model="detailForm"
                :rules="detailRules"
                label-position="right"
                label-width="100px"
                v-if="isForm"
                ref="detailForm"
              >
                <el-form-item
                  v-for="(item, index) in detailFormLabel"
                  :key="index"
                  :label="item.label"
                  :prop="item.model"
                  size="small"
                >
                  <span v-if="isForm">
                    <el-input
                      v-model="detailForm[item.model]"
                      size="small"
                      v-if="item.type === 'input'"
                    ></el-input>
                    <el-cascader
                      v-if="item.type === 'select'"
                      style="width:45%;"
                      size="small"
                      :options="options"
                      v-model="selectedOptions"
                      @change="handleChange"
                    ></el-cascader>
                  </span>
                  <!-- <span v-else>{{detailForm[item.model]}}</span> -->
                </el-form-item>
                <el-form-item style="margin-top: 12px;" :class="[isForm ? '': 'isNone']">
                  <el-button
                    type="primary"
                    size="mini"
                    style="width:12%;margin-right:10px;"
                    @click="setForm('detailForm')"
                  >保 存</el-button>
                  <el-button size="mini" style="width:12%;" @click="isForm = false">取 消</el-button>
                </el-form-item>
              </el-form>

              <!-- 表格区域 -->
              <el-table v-else :data="addArr" style="width: 100%">
                <el-table-column prop="updateTime" label="日期" width="180"></el-table-column>
                <el-table-column prop="receiverName" label="姓名" width="180"></el-table-column>
                <el-table-column prop="receiverAddress" label="地址"></el-table-column>
              </el-table>
            </div>
          </el-card>
          <div
            style="color: rgb(152, 152, 152);margin:10px 0 0 20px;font-size:12px;"
          >* 我们确保你所提供的信息均处于严格保密状态，不会泄露</div>
        </div>
      </div>
    </div>

    <common-footer></common-footer>
  </div>
</template>

<script>
import CommonHeader from "../../components/Show/CommonHeader";
import CommonFooter from "../../components/Show/CommonFooter";
import SafeNav from "../../components/Safe/SafeNav";
import { regionDataPlus, CodeToText } from "element-china-area-data";
import { mapState } from "vuex";
export default {
  components: {
    CommonHeader,
    CommonFooter,
    SafeNav,
  },
  data() {
    return {
      detailRules: {
        receiverName: [
          { required: true, message: "请输入收件人", trigger: "blur" },
        ],
        receiverMobile: [
          { required: true, message: "请输入收件人号码", trigger: "blur" },
        ],
        // city: [{ required: true, message: "请选中地址" }],
        receiverAddress: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
        receiverZip: [
          { required: true, message: "请输入邮政编码", trigger: "blur" },
        ],
      },
      isForm: false,
      activeId: 1,
      activeName: "1",
      // 地区选择器
      options: regionDataPlus,
      selectedOptions: [],
      // 地址表单
      detailForm: {
        userId: "",
        receiverName: "",
        receiverMobile: "",
        receiverProvince: "",
        receiverCity: "",
        receiverDistrict: "",
        receiverAddress: "",
        receiverZip: "",
      },
      detailFormLabel: [
        {
          label: "收件人：",
          model: "receiverName",
          rule: "receiverName",
          type: "input",
        },
        {
          label: "收件号码：",
          model: "receiverMobile",
          rule: "receiverMobile",
          type: "input",
        },
        {
          label: "省份城市：",
          model: "city",
          rule: "city",
          type: "select",
        },
        {
          label: "详细地址：",
          model: "receiverAddress",
          rule: "receiverAddress",
          type: "input",
        },
        {
          label: "邮政编码：",
          model: "receiverZip",
          rule: "receiverZip",
          type: "input",
        },
      ],
      addArr: [],
      tableData: [],
    };
  },
  methods: {
    isEdit() {
      this.isForm = !this.isForm;
    },
    handleChange(value) {
      var ctt =
        CodeToText[value[0]] + CodeToText[value[1]] + CodeToText[value[2]];
      this.detailForm.receiverProvince = CodeToText[value[0]];
      //   console.log("省份", this.receiverProvince);
      this.detailForm.receiverCity = CodeToText[value[1]];
      this.detailForm.receiverDistrict = CodeToText[value[2]];
      console.log(ctt);
    },
    // 获取地址详细
    async getUserAddress() {
      // console.log(this.$store.state.user.userInfo.id)
      const { data: res } = await this.$http.get("/address/list");
      if (res.code !== 200) {
        return this.$message.danger("获取地址失败");
      }
      this.addArr = res.data.map((item) => {
        console.log(item.updateTime);
        item.updateTime = this.timeStamp2String(item.updateTime);
        console.log(item.updateTime);
        return item;
      });
      console.log("地址详情:", this.addArr);
    },
    // 添加地址
    async setForm(formName) {
      console.log("表单数据", formName);
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { data: res } = await this.$http.post(
            "/address/insert",
            this.detailForm
          );
          if (res.code !== 200) {
            return this.$message.danger("添加地址失败");
          }
          //   console.log(this.detailForm);
          this.$message.success("添加地址成功");
          this.getUserAddress();
          this.isForm = false;
          console.log("请求:", res);
        }
      });
      //   console.log("用户：", this.userInfo.id);
      this.detailForm.userId = this.userInfo.id;
      //   console.log(this.detailForm.userId);

      // console.log(this.options);
      // console.log(this.selectedOptions);
    },
    //
    timeStamp2String(time) {
      var dateee = time
      console.log(dateee);
      var date = new Date(+new Date(dateee) + 16 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
      return date

    },
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  created() {
    this.getUserAddress();
  },
};
</script>

<style lang="less" scoped>
.isNone {
  display: none;
}
.accountCard {
  min-height: 420px;
  padding: 10px 30px;
  .titleWrap {
    display: flex;
    justify-content: space-between;
  }
  .formShow {
    margin-top: 25px;
    /deep/.el-form-item {
      margin: 0;
      margin-top: 20px;
      .el-form-item__label {
        color: #979797;
      }
      .el-input {
        width: 80%;
      }
    }
  }
}
.row{
  min-height: 400px;
}
</style>